<template>
  <view class="product-detail-container">
    <!-- 商品图片轮播 -->
    <view class="product-gallery">
      <swiper 
        class="gallery-swiper"
        :indicator-dots="true"
        :autoplay="false"
        :circular="true"
        indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="white"
      >
        <swiper-item 
          v-for="(image, index) in product.images" 
          :key="index"
        >
          <image 
            :src="image" 
            class="gallery-image" 
            mode="aspectFit"
            @click="previewImages(product.images, index)"
          ></image>
        </swiper-item>
      </swiper>
      
      <!-- 收藏按钮 -->
      <view class="favorite-btn" @click="toggleFavorite">
        <u-icon 
          :name="product.isFavorited ? 'heart-fill' : 'heart'" 
          size="22" 
          :color="product.isFavorited ? '#ff4757' : 'white'"
        ></u-icon>
      </view>
      
      <!-- 分享按钮 -->
      <view class="share-btn" @click="shareProduct">
        <u-icon name="share" size="22" color="white"></u-icon>
      </view>
    </view>
    
    <!-- 商品基本信息 -->
    <view class="product-info">
      <view class="product-header">
        <text class="product-title">{{ product.title }}</text>
        <text class="product-subtitle">{{ product.subtitle }}</text>
      </view>
      
      <view class="product-tags">
        <text 
          v-for="(tag, index) in product.tags" 
          :key="index"
          class="product-tag"
        >
          {{ tag }}
        </text>
      </view>
      
      <view class="price-section">
        <view class="price-info">
          <text class="current-price">¥{{ product.currentPrice }}</text>
          <text v-if="product.originalPrice" class="original-price">¥{{ product.originalPrice }}</text>
          <view v-if="product.discount" class="discount-badge">
            <text class="discount-text">{{ product.discount }}折</text>
          </view>
        </view>
        
        <view class="sales-info">
          <text class="sales-count">已售{{ formatCount(product.salesCount) }}</text>
          <view class="rating-info">
            <u-icon name="star-fill" size="14" color="#ffd700"></u-icon>
            <text class="rating-text">{{ product.rating }}</text>
            <text class="review-count">({{ formatCount(product.reviewCount) }}条评价)</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 促销活动 -->
    <view v-if="product.promotions && product.promotions.length > 0" class="promotions-section">
      <view class="section-title">
        <u-icon name="gift" size="18" color="#ff4757"></u-icon>
        <text class="title-text">优惠活动</text>
      </view>
      
      <view class="promotions-list">
        <view 
          v-for="(promotion, index) in product.promotions" 
          :key="index"
          class="promotion-item"
        >
          <view class="promotion-badge">
            <text class="badge-text">{{ promotion.type }}</text>
          </view>
          <text class="promotion-desc">{{ promotion.description }}</text>
        </view>
      </view>
    </view>
    
    <!-- 规格选择 -->
    <view v-if="product.specifications && product.specifications.length > 0" class="specs-section">
      <view class="section-title">
        <text class="title-text">选择规格</text>
      </view>
      
      <view 
        v-for="(spec, specIndex) in product.specifications" 
        :key="specIndex"
        class="spec-group"
      >
        <text class="spec-name">{{ spec.name }}</text>
        <view class="spec-options">
          <view 
            v-for="(option, optionIndex) in spec.options" 
            :key="optionIndex"
            class="spec-option"
            :class="{ 
              active: selectedSpecs[spec.name] === option.value,
              disabled: !option.available 
            }"
            @click="selectSpec(spec.name, option)"
          >
            <text class="option-text">{{ option.label }}</text>
            <text v-if="option.price" class="option-price">+¥{{ option.price }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 商品详情 -->
    <view class="product-details">
      <view class="section-title">
        <text class="title-text">商品详情</text>
      </view>
      
      <view class="details-content">
        <text class="details-text">{{ product.description }}</text>
        
        <!-- 详情图片 -->
        <view v-if="product.detailImages && product.detailImages.length > 0" class="detail-images">
          <image 
            v-for="(image, index) in product.detailImages" 
            :key="index"
            :src="image" 
            class="detail-image" 
            mode="widthFix"
            @click="previewImages(product.detailImages, index)"
          ></image>
        </view>
        
        <!-- 商品参数 -->
        <view v-if="product.parameters && product.parameters.length > 0" class="product-params">
          <text class="params-title">商品参数</text>
          <view class="params-list">
            <view 
              v-for="(param, index) in product.parameters" 
              :key="index"
              class="param-item"
            >
              <text class="param-name">{{ param.name }}</text>
              <text class="param-value">{{ param.value }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 用户评价 -->
    <view class="reviews-section">
      <view class="section-title">
        <text class="title-text">用户评价</text>
        <text class="review-summary">({{ formatCount(product.reviewCount) }}条)</text>
        <view class="view-all" @click="viewAllReviews">
          <text class="view-all-text">查看全部</text>
          <u-icon name="arrow-right" size="14" color="#007aff"></u-icon>
        </view>
      </view>
      
      <view v-if="reviewList.length > 0" class="reviews-list">
        <view 
          v-for="(review, index) in reviewList.slice(0, 3)" 
          :key="index"
          class="review-item"
        >
          <view class="review-header">
            <u-avatar :src="review.userAvatar" size="32"></u-avatar>
            <view class="review-user-info">
              <text class="review-username">{{ review.username }}</text>
              <view class="review-rating">
                <u-icon 
                  v-for="i in 5" 
                  :key="i"
                  name="star-fill" 
                  size="12" 
                  :color="i <= review.rating ? '#ffd700' : '#e0e0e0'"
                ></u-icon>
              </view>
            </view>
            <text class="review-time">{{ formatTime(review.createTime) }}</text>
          </view>
          
          <text class="review-content">{{ review.content }}</text>
          
          <!-- 评价图片 -->
          <view v-if="review.images && review.images.length > 0" class="review-images">
            <image 
              v-for="(image, idx) in review.images" 
              :key="idx"
              :src="image" 
              class="review-image" 
              mode="aspectFill"
              @click="previewImages(review.images, idx)"
            ></image>
          </view>
        </view>
      </view>
      
      <view v-else class="no-reviews">
        <text class="no-reviews-text">暂无评价</text>
      </view>
    </view>
    
    <!-- 推荐商品 -->
    <view class="recommend-section">
      <view class="section-title">
        <text class="title-text">相关推荐</text>
      </view>
      
      <scroll-view class="recommend-scroll" scroll-x>
        <view class="recommend-list">
          <view 
            v-for="(item, index) in recommendList" 
            :key="index"
            class="recommend-item"
            @click="viewProduct(item)"
          >
            <image :src="item.imageUrl" class="recommend-image" mode="aspectFill"></image>
            <text class="recommend-title">{{ item.title }}</text>
            <text class="recommend-price">¥{{ item.currentPrice }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-buttons">
        <view class="contact-actions">
          <view class="action-btn" @click="contactService">
            <u-icon name="chat" size="20" color="#666"></u-icon>
            <text class="action-text">客服</text>
          </view>
          
          <view class="action-btn" @click="addToCart">
            <u-icon name="shopping-cart" size="20" color="#666"></u-icon>
            <text class="action-text">购物车</text>
            <view v-if="cartCount > 0" class="cart-badge">
              <text class="badge-count">{{ cartCount > 99 ? '99+' : cartCount }}</text>
            </view>
          </view>
        </view>
        
        <view class="purchase-actions">
          <u-button 
            class="cart-btn"
            @click="showPurchaseOptions('cart')"
          >
            加入购物车
          </u-button>
          
          <u-button 
            type="primary"
            class="buy-btn"
            @click="showPurchaseOptions('buy')"
          >
            立即购买
          </u-button>
        </view>
      </view>
    </view>
    
    <!-- 购买选项弹窗 -->
    <u-popup 
      v-model="showPurchasePopup" 
      mode="bottom" 
      border-radius="20"
      :safe-area-inset-bottom="true"
    >
      <view class="purchase-popup">
        <view class="popup-header">
          <text class="popup-title">{{ purchaseType === 'cart' ? '加入购物车' : '立即购买' }}</text>
          <u-icon name="close" size="20" color="#999" @click="showPurchasePopup = false"></u-icon>
        </view>
        
        <!-- 商品信息 -->
        <view class="popup-product-info">
          <image :src="product.images[0]" class="popup-product-image" mode="aspectFill"></image>
          <view class="popup-product-details">
            <text class="popup-product-title">{{ product.title }}</text>
            <text class="popup-product-price">¥{{ finalPrice }}</text>
            <text class="popup-product-stock">库存{{ product.stock }}件</text>
          </view>
        </view>
        
        <!-- 规格选择 -->
        <view v-if="product.specifications && product.specifications.length > 0" class="popup-specs">
          <view 
            v-for="(spec, specIndex) in product.specifications" 
            :key="specIndex"
            class="popup-spec-group"
          >
            <text class="popup-spec-name">{{ spec.name }}</text>
            <view class="popup-spec-options">
              <view 
                v-for="(option, optionIndex) in spec.options" 
                :key="optionIndex"
                class="popup-spec-option"
                :class="{ 
                  active: selectedSpecs[spec.name] === option.value,
                  disabled: !option.available 
                }"
                @click="selectSpec(spec.name, option)"
              >
                <text class="popup-option-text">{{ option.label }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 数量选择 -->
        <view class="quantity-section">
          <text class="quantity-label">数量</text>
          <view class="quantity-selector">
            <view 
              class="quantity-btn"
              :class="{ disabled: quantity <= 1 }"
              @click="decreaseQuantity"
            >
              <u-icon name="minus" size="16" color="#666"></u-icon>
            </view>
            <text class="quantity-value">{{ quantity }}</text>
            <view 
              class="quantity-btn"
              :class="{ disabled: quantity >= product.stock }"
              @click="increaseQuantity"
            >
              <u-icon name="plus" size="16" color="#666"></u-icon>
            </view>
          </view>
        </view>
        
        <!-- 确认按钮 -->
        <view class="popup-actions">
          <u-button 
            :type="purchaseType === 'buy' ? 'primary' : 'default'"
            class="confirm-btn"
            :disabled="!canPurchase"
            @click="confirmPurchase"
          >
            {{ purchaseType === 'cart' ? '加入购物车' : `立即购买 ¥${(finalPrice * quantity).toFixed(2)}` }}
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { get, post } from '@/utils/request';

// 商品接口
interface Product {
  id: string;
  title: string;
  subtitle: string;
  description: string;
  images: string[];
  detailImages?: string[];
  currentPrice: number;
  originalPrice?: number;
  discount?: number;
  tags: string[];
  salesCount: number;
  rating: number;
  reviewCount: number;
  stock: number;
  isFavorited: boolean;
  promotions?: Promotion[];
  specifications?: Specification[];
  parameters?: Parameter[];
}

// 促销活动接口
interface Promotion {
  type: string;
  description: string;
}

// 规格接口
interface Specification {
  name: string;
  options: SpecOption[];
}

interface SpecOption {
  label: string;
  value: string;
  price?: number;
  available: boolean;
}

// 参数接口
interface Parameter {
  name: string;
  value: string;
}

// 评价接口
interface Review {
  id: string;
  username: string;
  userAvatar: string;
  rating: number;
  content: string;
  images?: string[];
  createTime: string;
}

// 推荐商品接口
interface RecommendItem {
  id: string;
  title: string;
  imageUrl: string;
  currentPrice: number;
}

@Component
export default class ProductDetailPage extends Vue {
  // 数据属性
  productId: string = '';
  product: Product = {} as Product;
  reviewList: Review[] = [];
  recommendList: RecommendItem[] = [];
  
  // 购买相关
  selectedSpecs: Record<string, string> = {};
  quantity: number = 1;
  showPurchasePopup: boolean = false;
  purchaseType: 'cart' | 'buy' = 'cart';
  cartCount: number = 0;
  
  loading: boolean = false;
  
  // 计算属性
  get finalPrice(): number {
    let price = this.product.currentPrice || 0;
    
    // 计算规格价格
    if (this.product.specifications) {
      for (const spec of this.product.specifications) {
        const selectedValue = this.selectedSpecs[spec.name];
        if (selectedValue) {
          const option = spec.options.find(opt => opt.value === selectedValue);
          if (option && option.price) {
            price += option.price;
          }
        }
      }
    }
    
    return price;
  }
  
  get canPurchase(): boolean {
    // 检查是否所有必选规格都已选择
    if (this.product.specifications) {
      for (const spec of this.product.specifications) {
        if (!this.selectedSpecs[spec.name]) {
          return false;
        }
      }
    }
    
    return this.quantity > 0 && this.quantity <= this.product.stock;
  }
  
  // 生命周期
  onLoad(options: any) {
    this.productId = options.id || '';
    if (this.productId) {
      this.loadProductDetail();
      this.loadProductReviews();
      this.loadRecommendProducts();
    }
    this.loadCartCount();
  }
  
  // 方法
  
  /**
   * 加载商品详情
   */
  async loadProductDetail() {
    if (this.loading) return;
    
    this.loading = true;
    
    try {
      const response = await get(`/products/${this.productId}`);
      this.product = response.data.product;
      
      // 初始化默认规格选择
      this.initDefaultSpecs();
      
    } catch (error) {
      console.error('加载商品详情失败:', error);
      
      // 使用模拟数据
      this.product = this.getMockProduct();
      this.initDefaultSpecs();
      
      uni.showToast({
        title: '加载失败',
        icon: 'none'
      });
    } finally {
      this.loading = false;
    }
  }
  
  /**
   * 初始化默认规格选择
   */
  initDefaultSpecs() {
    if (this.product.specifications) {
      for (const spec of this.product.specifications) {
        const availableOption = spec.options.find(opt => opt.available);
        if (availableOption) {
          this.selectedSpecs[spec.name] = availableOption.value;
        }
      }
    }
  }
  
  /**
   * 加载商品评价
   */
  async loadProductReviews() {
    try {
      const response = await get(`/products/${this.productId}/reviews`, {
        page: 1,
        pageSize: 10
      });
      this.reviewList = response.data.reviews || [];
    } catch (error) {
      console.error('加载评价失败:', error);
      
      // 使用模拟数据
      this.reviewList = this.getMockReviews();
    }
  }
  
  /**
   * 加载推荐商品
   */
  async loadRecommendProducts() {
    try {
      const response = await get(`/products/${this.productId}/recommend`);
      this.recommendList = response.data.products || [];
    } catch (error) {
      console.error('加载推荐商品失败:', error);
      
      // 使用模拟数据
      this.recommendList = this.getMockRecommendProducts();
    }
  }
  
  /**
   * 加载购物车数量
   */
  async loadCartCount() {
    try {
      const response = await get('/cart/count');
      this.cartCount = response.data.count || 0;
    } catch (error) {
      console.error('加载购物车数量失败:', error);
    }
  }
  
  /**
   * 选择规格
   */
  selectSpec(specName: string, option: SpecOption) {
    if (!option.available) return;
    
    this.$set(this.selectedSpecs, specName, option.value);
  }
  
  /**
   * 减少数量
   */
  decreaseQuantity() {
    if (this.quantity > 1) {
      this.quantity--;
    }
  }
  
  /**
   * 增加数量
   */
  increaseQuantity() {
    if (this.quantity < this.product.stock) {
      this.quantity++;
    }
  }
  
  /**
   * 切换收藏
   */
  async toggleFavorite() {
    try {
      const response = await post('/products/favorite', {
        productId: this.productId,
        action: this.product.isFavorited ? 'unfavorite' : 'favorite'
      });
      
      this.product.isFavorited = !this.product.isFavorited;
      
      uni.showToast({
        title: this.product.isFavorited ? '收藏成功' : '取消收藏',
        icon: 'success'
      });
      
    } catch (error) {
      console.error('收藏操作失败:', error);
      uni.showToast({
        title: '操作失败',
        icon: 'none'
      });
    }
  }
  
  /**
   * 分享商品
   */
  shareProduct() {
    uni.showActionSheet({
      itemList: ['复制链接', '分享到微信', '分享到朋友圈'],
      success: (res) => {
        switch (res.tapIndex) {
          case 0:
            uni.setClipboardData({
              data: `https://your-domain.com/product/${this.productId}`,
              success: () => {
                uni.showToast({
                  title: '链接已复制',
                  icon: 'success'
                });
              }
            });
            break;
        }
      }
    });
  }
  
  /**
   * 联系客服
   */
  contactService() {
    uni.navigateTo({
      url: '/pages/service/chat'
    });
  }
  
  /**
   * 显示购买选项
   */
  showPurchaseOptions(type: 'cart' | 'buy') {
    // 检查登录状态
    const token = uni.getStorageSync('token');
    if (!token) {
      uni.showModal({
        title: '提示',
        content: '请先登录后再购买',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/login'
            });
          }
        }
      });
      return;
    }
    
    this.purchaseType = type;
    this.quantity = 1;
    this.showPurchasePopup = true;
  }
  
  /**
   * 加入购物车
   */
  addToCart() {
    this.showPurchaseOptions('cart');
  }
  
  /**
   * 确认购买
   */
  async confirmPurchase() {
    if (!this.canPurchase) {
      uni.showToast({
        title: '请选择完整规格',
        icon: 'none'
      });
      return;
    }
    
    try {
      if (this.purchaseType === 'cart') {
        // 加入购物车
        await post('/cart/add', {
          productId: this.productId,
          specifications: this.selectedSpecs,
          quantity: this.quantity
        });
        
        this.cartCount += this.quantity;
        this.showPurchasePopup = false;
        
        uni.showToast({
          title: '已加入购物车',
          icon: 'success'
        });
        
      } else {
        // 立即购买
        const orderData = {
          items: [{
            productId: this.productId,
            specifications: this.selectedSpecs,
            quantity: this.quantity,
            price: this.finalPrice
          }]
        };
        
        // 跳转到订单确认页面
        uni.navigateTo({
          url: `/pages/order/confirm?data=${encodeURIComponent(JSON.stringify(orderData))}`
        });
      }
      
    } catch (error) {
      console.error('购买操作失败:', error);
      uni.showToast({
        title: '操作失败',
        icon: 'none'
      });
    }
  }
  
  /**
   * 查看商品
   */
  viewProduct(product: RecommendItem) {
    uni.navigateTo({
      url: `/pages/product/detail?id=${product.id}`
    });
  }
  
  /**
   * 查看全部评价
   */
  viewAllReviews() {
    uni.navigateTo({
      url: `/pages/product/reviews?id=${this.productId}`
    });
  }
  
  /**
   * 预览图片
   */
  previewImages(images: string[], current: number) {
    uni.previewImage({
      urls: images,
      current: current
    });
  }
  
  /**
   * 格式化数量
   */
  formatCount(count: number): string {
    if (count < 1000) {
      return count.toString();
    } else if (count < 10000) {
      return (count / 1000).toFixed(1) + 'k';
    } else {
      return (count / 10000).toFixed(1) + 'w';
    }
  }
  
  /**
   * 格式化时间
   */
  formatTime(timeString: string): string {
    const date = new Date(timeString);
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    
    const minutes = Math.floor(diff / (1000 * 60));
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    
    if (minutes < 60) {
      return `${minutes}分钟前`;
    } else if (hours < 24) {
      return `${hours}小时前`;
    } else if (days < 30) {
      return `${days}天前`;
    } else {
      return date.toLocaleDateString();
    }
  }
  
  /**
   * 获取模拟商品数据
   */
  getMockProduct(): Product {
    return {
      id: this.productId,
      title: '婴儿奶瓶套装',
      subtitle: '安全材质，防胀气设计，适合0-12个月宝宝',
      description: '这款婴儿奶瓶套装采用优质PPSU材质制作，安全无毒，耐高温。独特的防胀气设计，有效减少宝宝吸入空气，降低肠胃不适。奶嘴采用仿母乳设计，柔软舒适，让宝宝更容易接受。',
      images: [
        'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20bottle%20set%20main&image_size=square',
        'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20bottle%20details&image_size=square',
        'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20bottle%20usage&image_size=square'
      ],
      detailImages: [
        'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20bottle%20features&image_size=landscape_16_9',
        'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20bottle%20materials&image_size=landscape_16_9'
      ],
      currentPrice: 89.9,
      originalPrice: 129.9,
      discount: 6.9,
      tags: ['热销', '安全', '防胀气'],
      salesCount: 1250,
      rating: 4.8,
      reviewCount: 456,
      stock: 99,
      isFavorited: false,
      promotions: [
        {
          type: '满减',
          description: '满199减30，满299减50'
        },
        {
          type: '赠品',
          description: '购买即送奶瓶清洁刷一套'
        }
      ],
      specifications: [
        {
          name: '容量',
          options: [
            { label: '120ml', value: '120ml', available: true },
            { label: '240ml', value: '240ml', available: true, price: 10 },
            { label: '330ml', value: '330ml', available: false }
          ]
        },
        {
          name: '颜色',
          options: [
            { label: '粉色', value: 'pink', available: true },
            { label: '蓝色', value: 'blue', available: true },
            { label: '绿色', value: 'green', available: true }
          ]
        }
      ],
      parameters: [
        { name: '材质', value: 'PPSU' },
        { name: '适用年龄', value: '0-12个月' },
        { name: '产地', value: '中国' },
        { name: '品牌', value: '贝亲' }
      ]
    };
  }
  
  /**
   * 获取模拟评价数据
   */
  getMockReviews(): Review[] {
    return [
      {
        id: '1',
        username: '新手妈妈',
        userAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=young%20mother&image_size=square',
        rating: 5,
        content: '质量很好，宝宝很喜欢用，防胀气效果明显，推荐！',
        images: [
          'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20using%20bottle&image_size=square'
        ],
        createTime: '2024-01-15T10:30:00Z'
      },
      {
        id: '2',
        username: '宝宝爸爸',
        userAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=young%20father&image_size=square',
        rating: 4,
        content: '奶瓶很不错，就是价格稍微贵了一点，但是质量确实好。',
        createTime: '2024-01-14T15:20:00Z'
      }
    ];
  }
  
  /**
   * 获取模拟推荐商品
   */
  getMockRecommendProducts(): RecommendItem[] {
    return [
      {
        id: '2',
        title: '婴儿连体衣',
        imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20onesie&image_size=square',
        currentPrice: 68.0
      },
      {
        id: '3',
        title: '婴儿安抚玩具',
        imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20toy&image_size=square',
        currentPrice: 45.0
      },
      {
        id: '4',
        title: '婴儿湿巾',
        imageUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20wipes&image_size=square',
        currentPrice: 29.9
      }
    ];
  }
}
</script>

<style lang="scss" scoped>
.product-detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.product-gallery {
  position: relative;
  background-color: white;
  
  .gallery-swiper {
    height: 750rpx;
    
    .gallery-image {
      width: 100%;
      height: 100%;
    }
  }
  
  .favorite-btn {
    position: absolute;
    top: 30rpx;
    right: 80rpx;
    width: 60rpx;
    height: 60rpx;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .share-btn {
    position: absolute;
    top: 30rpx;
    right: 20rpx;
    width: 60rpx;
    height: 60rpx;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.product-info {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .product-header {
    margin-bottom: 20rpx;
    
    .product-title {
      display: block;
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      margin-bottom: 10rpx;
    }
    
    .product-subtitle {
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
    }
  }
  
  .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    margin-bottom: 25rpx;
    
    .product-tag {
      padding: 8rpx 16rpx;
      background-color: #fff2e8;
      color: #ff6b35;
      font-size: 22rpx;
      border-radius: 12rpx;
    }
  }
  
  .price-section {
    .price-info {
      display: flex;
      align-items: baseline;
      margin-bottom: 15rpx;
      
      .current-price {
        font-size: 42rpx;
        font-weight: 600;
        color: #ff4757;
        margin-right: 15rpx;
      }
      
      .original-price {
        font-size: 28rpx;
        color: #999;
        text-decoration: line-through;
        margin-right: 15rpx;
      }
      
      .discount-badge {
        padding: 4rpx 8rpx;
        background-color: #ff4757;
        border-radius: 8rpx;
        
        .discount-text {
          font-size: 20rpx;
          color: white;
        }
      }
    }
    
    .sales-info {
      display: flex;
      align-items: center;
      gap: 30rpx;
      
      .sales-count {
        font-size: 24rpx;
        color: #666;
      }
      
      .rating-info {
        display: flex;
        align-items: center;
        
        .rating-text {
          margin-left: 5rpx;
          font-size: 24rpx;
          color: #333;
        }
        
        .review-count {
          margin-left: 5rpx;
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
}

.promotions-section {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .title-text {
      margin-left: 8rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .promotions-list {
    .promotion-item {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .promotion-badge {
        padding: 4rpx 8rpx;
        background-color: #ff4757;
        border-radius: 6rpx;
        margin-right: 15rpx;
        
        .badge-text {
          font-size: 20rpx;
          color: white;
        }
      }
      
      .promotion-desc {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}

.specs-section {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    margin-bottom: 25rpx;
    
    .title-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .spec-group {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .spec-name {
      display: block;
      font-size: 26rpx;
      color: #333;
      margin-bottom: 15rpx;
    }
    
    .spec-options {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;
      
      .spec-option {
        padding: 15rpx 25rpx;
        background-color: #f8f8f8;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        transition: all 0.3s;
        
        &.active {
          background-color: #e6f3ff;
          border-color: #007aff;
          
          .option-text {
            color: #007aff;
          }
        }
        
        &.disabled {
          background-color: #f0f0f0;
          border-color: #d0d0d0;
          
          .option-text {
            color: #999;
          }
        }
        
        .option-text {
          font-size: 26rpx;
          color: #333;
        }
        
        .option-price {
          font-size: 22rpx;
          color: #ff4757;
          margin-left: 8rpx;
        }
      }
    }
  }
}

.product-details {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    margin-bottom: 25rpx;
    
    .title-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .details-content {
    .details-text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
      margin-bottom: 30rpx;
    }
    
    .detail-images {
      margin-bottom: 30rpx;
      
      .detail-image {
        width: 100%;
        margin-bottom: 20rpx;
        border-radius: 12rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .product-params {
      .params-title {
        display: block;
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .params-list {
        .param-item {
          display: flex;
          justify-content: space-between;
          padding: 15rpx 0;
          border-bottom: 1rpx solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .param-name {
            font-size: 26rpx;
            color: #666;
          }
          
          .param-value {
            font-size: 26rpx;
            color: #333;
          }
        }
      }
    }
  }
}

.reviews-section {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25rpx;
    
    .title-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
    
    .review-summary {
      font-size: 24rpx;
      color: #666;
    }
    
    .view-all {
      display: flex;
      align-items: center;
      
      .view-all-text {
        font-size: 24rpx;
        color: #007aff;
        margin-right: 5rpx;
      }
    }
  }
  
  .reviews-list {
    .review-item {
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .review-header {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        .review-user-info {
          flex: 1;
          margin-left: 15rpx;
          
          .review-username {
            display: block;
            font-size: 26rpx;
            color: #333;
            margin-bottom: 8rpx;
          }
          
          .review-rating {
            display: flex;
          }
        }
        
        .review-time {
          font-size: 22rpx;
          color: #999;
        }
      }
      
      .review-content {
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
        margin-bottom: 15rpx;
      }
      
      .review-images {
        display: flex;
        gap: 10rpx;
        
        .review-image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 8rpx;
        }
      }
    }
  }
  
  .no-reviews {
    text-align: center;
    padding: 60rpx 0;
    
    .no-reviews-text {
      font-size: 26rpx;
      color: #999;
    }
  }
}

.recommend-section {
  background-color: white;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    margin-bottom: 25rpx;
    
    .title-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .recommend-scroll {
    white-space: nowrap;
  }
  
  .recommend-list {
    display: flex;
    gap: 20rpx;
    
    .recommend-item {
      flex-shrink: 0;
      width: 200rpx;
      
      .recommend-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 12rpx;
        margin-bottom: 10rpx;
      }
      
      .recommend-title {
        display: block;
        font-size: 24rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 8rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      
      .recommend-price {
        font-size: 26rpx;
        font-weight: 600;
        color: #ff4757;
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 20rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid #f0f0f0;
  
  .action-buttons {
    display: flex;
    gap: 20rpx;
    
    .contact-actions {
      display: flex;
      gap: 20rpx;
      
      .action-btn {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 80rpx;
        
        .action-text {
          font-size: 20rpx;
          color: #666;
          margin-top: 4rpx;
        }
        
        .cart-badge {
          position: absolute;
          top: -5rpx;
          right: -5rpx;
          min-width: 32rpx;
          height: 32rpx;
          background-color: #ff4757;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .badge-count {
            font-size: 18rpx;
            color: white;
            padding: 0 6rpx;
          }
        }
      }
    }
    
    .purchase-actions {
      flex: 1;
      display: flex;
      gap: 15rpx;
      
      .cart-btn {
        flex: 1;
        height: 80rpx;
        background-color: #ff9500;
        color: white;
        border: none;
        font-size: 28rpx;
        font-weight: 600;
      }
      
      .buy-btn {
        flex: 1;
        height: 80rpx;
        font-size: 28rpx;
        font-weight: 600;
      }
    }
  }
}

.purchase-popup {
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .popup-product-info {
    display: flex;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-product-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 12rpx;
      margin-right: 20rpx;
    }
    
    .popup-product-details {
      flex: 1;
      
      .popup-product-title {
        display: block;
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10rpx;
      }
      
      .popup-product-price {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #ff4757;
        margin-bottom: 10rpx;
      }
      
      .popup-product-stock {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  
  .popup-specs {
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-spec-group {
      margin-bottom: 25rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .popup-spec-name {
        display: block;
        font-size: 26rpx;
        color: #333;
        margin-bottom: 15rpx;
      }
      
      .popup-spec-options {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
        
        .popup-spec-option {
          padding: 12rpx 20rpx;
          background-color: #f8f8f8;
          border: 1rpx solid #e0e0e0;
          border-radius: 8rpx;
          transition: all 0.3s;
          
          &.active {
            background-color: #e6f3ff;
            border-color: #007aff;
            
            .popup-option-text {
              color: #007aff;
            }
          }
          
          &.disabled {
            background-color: #f0f0f0;
            border-color: #d0d0d0;
            
            .popup-option-text {
              color: #999;
            }
          }
          
          .popup-option-text {
            font-size: 24rpx;
            color: #333;
          }
        }
      }
    }
  }
  
  .quantity-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .quantity-label {
      font-size: 26rpx;
      color: #333;
    }
    
    .quantity-selector {
      display: flex;
      align-items: center;
      
      .quantity-btn {
        width: 60rpx;
        height: 60rpx;
        background-color: #f8f8f8;
        border: 1rpx solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.disabled {
          background-color: #f0f0f0;
          border-color: #d0d0d0;
        }
        
        &:first-child {
          border-radius: 8rpx 0 0 8rpx;
        }
        
        &:last-child {
          border-radius: 0 8rpx 8rpx 0;
        }
      }
      
      .quantity-value {
        width: 100rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333;
        border-top: 1rpx solid #e0e0e0;
        border-bottom: 1rpx solid #e0e0e0;
      }
    }
  }
  
  .popup-actions {
    padding: 30rpx;
    
    .confirm-btn {
      width: 100%;
      height: 80rpx;
      font-size: 30rpx;
      font-weight: 600;
    }
  }
}
</style>